<template>
  <div>
    <div class="breadcrumb-box">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 卡片区域 搜索栏 用户列表 -->
    <el-card class="box-card">
      <commentHeader
          :name="'用户管理'">
        <template v-slot:buttons>
          <!--头部按钮 -->
          <CustomCommButton
              :config="heardButtonConfig"></CustomCommButton>
        </template>
      </commentHeader>
      <div class="search-box">
        <span>姓名：</span>
        <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable>
        </el-input>
        <el-button
            type="primary"
            @click="search({})">搜索
        </el-button>
      </div>
      <!--  用户列表  -->
      <div class="user-list-box">
        <el-table
            :data="userListData"
            v-loading="loading"
            border
            empty-text="加载中"
            class="user-list-table">
          <el-table-column v-for="(item,index) in userListHead"
                           :key="index+item.label"
                           :prop="item.prop"
                           :label="item.label"
                           align="center"
                           class="user-list-table-column"
          >

          </el-table-column>
          <el-table-column label="操作"
                           align="center">
            <template #default="scope">
              <el-button size="small"
                         type="primary"
                         @click="handleEdit(scope.$index, scope.row)">
                修改
              </el-button>
              <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
          <el-pagination
              :current-page="pageConfig.page"
              :page-size="pageConfig.pageSize"
              :page-sizes="[3,10, 20, 30, 40]"
              :small="pageConfig.small"
              :disabled="pageConfig.disabled"
              :background="pageConfig.background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageConfig.total"
              next-text="下一页"
              prev-text="上一页"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    <!--修改表单-->
    <el-dialog
        v-model="updateDialog">
      <CommentForm
          :from-type="'update'"
          :config="updateConfig"
          :list="updateFormField"
      >
      </CommentForm>
    </el-dialog>
  </div>

</template>

<script>
import {getTableHeadInfo, post} from '@/components/request/api'
import button from "@/components/commen/Button.vue";

import config from '@/json/config.json'
import CommentForm from "@/components/commen/Form.vue";

export default {
  name: 'UserManage',
  components: {CommentForm},
  computed: {
    button() {
      return button
    }
  },

  data() {
    return {
      /*用户数据集合*/
      userListData: [],
      loading: true,
      /*用户表格表头*/
      userListHead: [],
      /*按钮集合配置*/
      buttons: config.userManageHeaderConfig,
      //查询条件
      queryInfo: {query: ""},
      addDialogVisible: false,
      config: {
        gutter: 20,
        showPercent: 2,
        labelWidth: 100,
      },
      commentFormList: [
        {
          "value": {
            "type": "str",
            "defaultValueType": "normal",
            "defaultValue": "1111"
          },
          "name": "姓名",
          "id": "username",
          "key": ""
        },
        {
          "value": {
            "type": "str",
            "defaultValueType": "normal",
            "defaultValue": "1111"
          },
          "name": "密码",
          "id": "pwd",
          "key": ""
        },
        {
          "value": {
            "type": "str",
            "defaultValueType": "normal",
            "defaultValue": "1111"
          },
          "name": "手机",
          "id": "phone",
          "key": ""
        },
        {
          "value": {
            "type": "str",
            "defaultValueType": "normal",
            "defaultValue": "1111"
          },
          "key": "",
          "name": "邮箱",
          "id": "email",
          layout: {
            "labelWidth": 100,
          }
        },
      ],
      /*页面分页数据*/
      page: 1,
      pageSize: 10,
      /*修改表单的隐藏显示*/
      updateDialog: false,
      /*修改表单的配置*/
      updateConfig: config.userManageUpdateFormConfig,
      updateFormField: config.userManageUpdateFormFieldList,
      /*分页配置*/
      pageConfig: {},
      /*头部按钮配置*/
      heardButtonConfig: config.userManageHeardButtonConfig
    }
  },
  /*方法*/
  provide() {
    return {
      fClearDialog: this.clearDialog,
      // parDisplay: this.parDisplay,
    };
  },
  methods: {
    /*current-page 改变时触发*/
    handleCurrentChange(page) {
      this.pageConfig.page = page
      let parMap = {}
      if (this.queryInfo.query) {
        parMap['username'] = this.queryInfo.query;
      }
      parMap['page'] = this.pageConfig.page;
      parMap['pageSize'] = this.pageConfig.pageSize;
      this.getUserManageList(parMap);
    },
    /*page-size 改变时触发*/
    handleSizeChange(pageSize) {
      this.pageConfig.pageSize = pageSize
      let parMap = {}
      if (this.queryInfo.query) {
        parMap['username'] = this.queryInfo.query;
      }
      parMap['page'] = this.pageConfig.page;
      parMap['pageSize'] = this.pageConfig.pageSize;
      this.getUserManageList(parMap);
    },
    clearDialog() {
      this.updateDialog = false;
    },
// 数组转对象方法
    arrayToObject(arr, key, value) {
      let map = {};
      arr.forEach(item => {
        // map[item.key] = {label: item.label, color: item.color, size: item.size};
        // if (item[key]) {
        map[item[key]] = item[value];
        // }
      });
      return map;
    },
//需要使用数组转对象的方法
    getData() {
      let newObj = this.arrayToObject(this.editScreenVenue);
      console.log(newObj, 'newObj');
    },
    /*搜索*/
    search() {
      let parMap = {}
      if (this.queryInfo.query) {
        parMap['username'] = this.queryInfo.query;
      }
      parMap['page'] = this.pageConfig.page;
      parMap['pageSize'] = this.pageConfig.pageSize;
      this.getUserManageList(parMap);
    },
    getUserManageList(parMap) {
      let userListDataPar = {
        'page': parMap.page,
        'pageSize': parMap.pageSize,
        'collectionName': "user"
      };
      if (parMap) {
        userListDataPar['parMap'] = parMap;
      }
      post('/comm/selectPage', userListDataPar).then((res) => {
        console.log(res.data.code)
        if (res.data.code === 200) {
          console.log(res.data.countSize)
          this.userListData = res.data.data;
          console.log('初始化表格数据，', this.userListData,
              this.pageConfig)
          console.log(typeof this.pageConfig)
          this.pageConfig['total'] = parseInt(res.data.countSize);
          console.log(this.pageConfig)
        }
      }).catch((error) => {
        console.log("error", error)
        this.$message.error("初始化数据错误")
      })
    },
    /*修改*/
    handleEdit(index, row) {
      console.log(index)
      console.log(row)
      this.updateDialog = true;
      this.updateFormField = [];
      let array = [];
      //设置名称对应的id
      let keyMap = this.arrayToObject(this.userListHead, 'prop', 'label')
      console.log('row', row)
      Object.keys(row).forEach(key => {
        let show;
        if (key === 'id' || key === 'pwd' || key === 'name') {
          show = false;
        } else {
          show = true;
        }
        let updateItem = {
          "value": {
            "type": "str",
            "defaultValueType": "normal",
            "defaultValue": "1111"
          },
          "name": keyMap[key],
          "id": key,
          "key": row[key],
          "show": show,
        }
        array.push(updateItem);
      })
      this.updateConfig.fieldLis = array;
      this.updateFormField = array;
      console.log(array)
    },

  },
  mounted() {
    /*初始化表头*/
    //数据绑定操作
    getTableHeadInfo("userManageList")
        .then((res) => {
          console.log(res.data.code)
          if (res.data.code === 200) {
            this.userListHead = res.data.data;
            console.log(this.userListHead)
            this.loading = false;
          }
        }).catch(() => {
      this.$message.error("初始化数据错误")
    })
    /*初始化分页数据*/
    this.pageConfig = config.userManageTablePageConfig;
    /*初始化表格数据*/
    let parMap = {}
    parMap['page'] = this.pageConfig.page;
    parMap['pageSize'] = this.pageConfig.pageSize;
    this.getUserManageList(parMap);
    console.log('初始化表格数据，', this.userListData)
  }
}
</script>

<style lang="less" scoped>
.demo-pagination-block {
  margin-top: 10px;
}

.box-card {
  margin-top: 20px;
  //position: relative;

  .heard-box {
    display: flex;
    //border: 1px solid red;
    border-bottom: 1px solid red;
    justify-content: space-between;
    align-items: center;
    height: 50px;

    .label-box {
      display: flex;
    }

    .button-box {
      display: flex;
    }
  }

  .search-box {
    //position: relative;

    margin-top: 20px;
    //border: 1px solid red;
    width: 100%;
    box-sizing: border-box;
    /**/
    //display: block;
    .input-item {
      display: inline-block;
      //display: flex;
      align-items: center;
      height: 40px;

    }

    .el-input {
      width: 200px;
      margin-left: 10px;
      //margin-top: 10px;
    }

    .el-button {
      margin-left: 10px;
      //margin-top: 10px;
    }
  }
}

.user-list-table {
  position: relative;

  margin-top: 20px;
  width: 100%;
  height: 100%;

  .user-list-table-column {
    border: 1px solid #000;
    border-right: none;
    border-bottom: none;
  }
}

</style>


